<template>
  <div style="margin-top:30px;">
      <div class="tips">存储库字段表</div>
    <el-form ref="form" :model="formData" label-width="120px">
      <el-form-item prop="type" label="存储数据标准">
        <el-cascader
          v-model="formData.id"
          :options="options"
          :props="{ value: 'id', label: 'name'}"
          :show-all-levels="false"></el-cascader>
      </el-form-item>
    </el-form>
    <el-table :data="noticeList" :header-cell-style="{ background: '#F3F5FC' }">
      <el-table-column label="序号" align="center" width="100">
        <template slot-scope="scop">
          {{ scop.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="字段名称"
        align="center"
        prop="fieldName"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="字段值" align="center" prop="fieldValue"/>
      <el-table-column label="数据类型" align="center" prop="fieldType"/>
      <el-table-column label="存储库字段名称" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-select v-model="scope.row.storeValue" placeholder="请选择" @change="handleChange($event,scope.$index)">
            <el-option
              v-for="item in storeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="描述" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <span>{{scope.row.description}}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import storageData from '@/views/accessProduct/mockData/storageData.json'

export default {
  name: 'step3',
  data(){
    return{
      formData:{
        name:'',
      },
      options:storageData.list,
      description:'',
      storeOptions:[
        {
          label:'raw.version',
          value:'raw.version'
        },
        {
          label:'raw.pnt_id',
          value:'raw.pnt_id'
        },
        {
          label:'user_name',
          value:'user_name'
        },
        {
          label:'raw.port',
          value:'raw.port'
        }
      ],
      noticeList:[{
        fieldName:'fieldName',
        fieldType:'原始数据',
        fieldValue:'HP LaserJet Pro MFP M426-M427 PCL-6',
        storeValue:''
      },{
        fieldName:'reader',
        fieldType:'原始数据',
        fieldValue:'0',
        storeValue:'',
        description:''
      },{
        fieldName:'hostid',
        fieldType:'原始数据',
        fieldValue:'d706e424-0cff-4ece-a2de-eb8dc79f39c1',
        storeValue:'',
        description:''
      },{
        fieldName:'starttime',
        fieldType:'原始数据',
        fieldValue:'2022-03-01 13:59:53',
        storeValue:'',
        description:''
      }],
      list:[{
        "id": null,
        "columnName": "raw.version",
        "description": "设备版本号"
      },
        {
          "id": null,
          "columnName": "raw.pnt_id",
          "description": "打印机编号"
        },
        {
          "id": null,
          "columnName": "user_name",
          "description": "终端责任人名称"
        },
        {
          "id": null,
          "columnName": "raw.port",
          "description": "主机端口"
        }]
    }
  },
  methods:{
    handleChange(a,b){
      let selectNode = this.list.filter(item=>{
       return  a==item.columnName
      });
      this.noticeList[b].description=selectNode[0].description
    }
  }
}
</script>

<style scoped>

</style>
